<div class="card card-body shadow pointer mb-4" (click)="showIndicator(indicator.id)">
    <div class="d-flex">
        <div class="mr-auto">
            <i class="ti- mr-2"></i> {{ indicator.name }}
        </div>
        <div class="ml-auto">{{ indicator.score }}</div>
    </div>
</div>

<app-modal [id]="'indicator' + indicator.id" [size]="'modal-lg'">
    <div class="app-modal-header">
        Governance Indicator
    </div>
    <div class="app-modal-body">
        <div class="d-flex">
            <div class="mr-auto">
                <h4>{{ indicator.name }}</h4>
            </div>
            <div class="ml-auto">
                <h4 class="mb-0">{{ indicator.score }}</h4>
                Score
            </div>
        </div>

        <p class="mt-4" [innerHtml]="indicator.standardText"></p>
        <ul>
            <li *ngFor="let tickBox of indicator.tickBoxes">{{ tickBox }}</li>
        </ul>
        <div *ngIf="indicator.comment" class="mt-5">
            <h6>NOTE</h6>
            <p [innerHtml]="indicator.comment"></p>
        </div>
    </div>
</app-modal>
